<!--
 * @Author: linj
 * @Email: 993353454@qq.com
 * @Date: 2020-06-29 11:53:43
 * @Description:
-->
<template>
  <transition name="fade">
    <div class="c-com-list"
      v-show="show">
      <div class="fs-16 b title">组件列表</div>
      <div class="c-item pd-f10"
        v-for="(item,index) in list.com"
        :key="index">
        {{item.name}}
        <button @click="$emit('addItem',item.key)">添加</button>
      </div>
    </div>
  </transition>
</template>
<script setup>
import store from '@/store'
import { reactive } from 'vue-demi'
defineProps({
  show: {
    type: Boolean,
    default: false,
  }
})
defineEmits(['addItem'])
const list = reactive({})
list.com = store.state.ComList
</script>

<style scoped lang="scss">
.c-com-list {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
  width: 300px;
  background-color: #fff;
  .c-item {
  }
  .title {
    padding: 10px;
    background: rgb(236, 236, 236);
  }
}
</style>